import React from "react";
import {Tooltip} from "antd";
import {DownloadOutlined, LinkOutlined} from "@ant-design/icons";
import BaseComponent from "../../redare/components/BaseComponent";
import Zmage from "react-zmage";
import {uploadFileType, uploadImgType} from "../../common/ConstField";
import ContainerComponent from "./ContainerComponent";
import FolderViewOutlined from "@ant-design/icons/lib/icons/FolderViewOutlined";
import EyeOutlined from "@ant-design/icons/lib/icons/EyeOutlined";

/**
 * 附件下载显示
 * @date 2020-8-12 21:33:42
 * @author WanJie.Peng
 */
export default class FileDownShow extends BaseComponent{

  static defaultProps = {
    data:[]
  };

  downFile(uri, name){
    try{
      window.location.href = uri+"?downLoad=true&fileName="+name;
    }catch (e) {
      console.error("附件下载错误",e);
    }
  }

  preview(file) {
    let {type} = file;
    if (uploadImgType.indexOf(type) === -1) {
      this.filePreviewModal.__showModal(file)
    }else {
      Zmage.browsing({src: file.uri})
    }
  }

  render() {

    let data = this.props.data || [];

    return (
      <div style={{marginBottom: '-5px', marginLeft: '10px'}}>
        {
          data.map((item)=>{
            return (
              <div key={'FileDownShowItem_'+item.id} style={{marginBottom: '5px'}}>
                <LinkOutlined />&nbsp;
                {item.name}

                {
                  uploadImgType.indexOf(item.type) !== -1
                    &&
                  <Tooltip title="预览">
                    <EyeOutlined style={{marginLeft: '12px', top: '2px', position: "relative"}} onClick={()=>{ this.preview(item)}}  />
                  </Tooltip>
                }
                <Tooltip title="下载">
                  <DownloadOutlined
                    style={{marginLeft: '12px'}}
                    onClick={()=>{this.downFile(item.uri, item.name)}}
                  />
                </Tooltip>

              </div>
            )
          })
        }
      </div>
    );
  }

}